<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tick text{
        font-size:12px;
        stroke:#666;
      }
    </style>
  </head>
  <body>

    <script src="../d3.js"></script>
    <script>
    const svg = d3.select('body').append('svg').attr('width',600).attr('height',900).style('border','1px solid #ccc');

     const scale = d3.scaleLinear()
        .domain([0,33])
        .range([0,500])
        .nice();

      const scale2 = d3.scaleTime()
        .domain([new Date('2020-01-01 00:00:00') , new Date('2020-01-02 00:00:00')])
        .range([0,500])  

      const scale3 = d3.scaleBand()
        .domain(['香蕉','苹果','橘子'])
        .range([0,500])
        
        
      let g = svg.append('g').attr('transform','translate(50,50)')
      let axis = d3.axisBottom(scale) 
      //axis.ticks(3);  
      //axis.tickValues([0,10,20,30,35])
      g.call(axis); //axis(svg)


      g = svg.append('g').attr('transform','translate(50,150)')
      axis = d3.axisBottom(scale2) ;  
      axis.tickFormat(d3.timeFormat('%H'))
      g.call(axis); //axis(svg)

      g = svg.append('g').attr('transform','translate(50,250)')
      axis = d3.axisBottom(scale3) ;  
      g.call(axis); //axis(svg)


      setTimeout(() => {
        //scale3.range([100,400])
        //g.transition().duration(1000).call(axis);
      }, 1000);


      g = svg.append('g').attr('transform','translate(50,300)')
      axis = d3.axisLeft(scale) ;
      axis.tickSize(-500);  
      axis.tickPadding(10);
      axis.offset(0);
      g.call(axis); //axis(svg)

    </script>
  </body>
</html>
